<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>课程类别管理</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/css/back-index.css"/>
    <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap-paginator.js"></script>
    <script src="/js/bootstrap-mypaginator.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            $("#courseType-page").bootstrapPaginator({
                bootstrapMajorVersion: 3,   // bootstrap3之前不需要配置
                currentPage: "[[${typePage.pageNum == 0 ? 1 : typePage.pageNum}]]",
                totalPages: "[[${typePage.pages == 0 ? 1 : typePage.pages}]]",
                onPageClicked: function (event, originalEvent, type, page) {
                    $("#pageNo").val(page);
                    $("#searchForm").submit();
                }
            })
            $(".courseType-modify").on("click", function () {
                // 获取当前行的数据
                var $row = $(this).closest("tr");
                var id = $row.find("td:eq(0)").text(); // 第一列是ID
                var name = $row.find("td:eq(1)").text(); // 第二列是名称

                // 填充到修改模态框
                $("#courseType2-id").val(id);
                $("#courseType2-name").val(name);

                // 显示修改模态框
                $(".modal-title").html("修改类别");
                $("#courseTypeModal2").modal("show");
            });

            // 添加按钮点击事件 - 清空添加模态框
            $("#doAddCourseType").on("click", function () {
                // 清空添加模态框的输入
                $("#courseType-name").val("");

                // 显示添加模态框
                $(".modal-title").html("添加类别");
                $("#courseTypeModal").modal("show");
            });

            // 添加功能
            $("#addType").click(function () {
                var typeName = $("#courseType-name").val();
                if (!typeName) {
                    alert("请输入类别名称");
                    return;
                }

                $.ajax({
                    type: "post",
                    url: "/type/addSonType",
                    data: {
                        "typeName": typeName,
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.reload();
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                });
            });

            // 修改功能
            $("#modifyType").click(function () {
                var id = $("#courseType2-id").val();
                var name = $("#courseType2-name").val();
                if (!name) {
                    alert("请输入类别名称");
                    return;
                }

                $.ajax({
                    type: "post",
                    url: "/type/modifyType",
                    data: {
                        "id": id,
                        "name": name,
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.reload();
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                });
            });
            //禁用
            $("input[name='disabledType']").click(function () {
                $.ajax({
                    type: "post",
                    url: "/type/disabled",
                    data: {
                        "id": $(this).attr("data-id"),
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.reload();
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            });
            // 启用
            $("input[name='enabledType']").click(function () {
                $.ajax({
                    type: "post",
                    url: "/type/enabled",
                    data: {
                        "id": $(this).attr("data-id"),
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.reload();
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            });
            //查询子类别
            // $("#selectSonOne").click(function () {
            //     $.ajax({
            //         type: "post",
            //         url: "/type/findSonType",
            //         data: {
            //             "id": $(this).attr("data-id"),
            //         },
            //         dataType: "json",
            //         success: function (result) {
            //             if (result.responseCode == "2001") {
            //                 location.href = "/type/findSonType?pageNo=[[${typePage.pageNum == 0 ? 1 : typePage.pageNum}]]";
            //             } else {
            //                 $("#errorMsg").html(result.message);
            //             }
            //         }
            //     })
            // });
            $("#selectSonOne").on("click", function () {
                var id = $(this).attr("data-id");
                var url = '/type/findSonType?id=' + id ;
                $('#frame-id', window.parent.document).attr('src', url);
            });
            // $("#back").on("click", function () {
            //     var id = $(this).attr("data-id");
            //     var url = '/type/findFatherType?id=' + id ;
            //     $('#frame-id', window.parent.document).attr('src', url+"&pageNo=[[${typePage.pageNum == 0 ? 1 :typePage.pageNum}]]");
            // });
            $("#back").on("click", function() {
                var id = $(this).attr("data-id");
                $("#pageNo").val("[[${typePage.pageNum == 0 ? 1 : typePage.pageNum}]]");
                $("<input>").attr({
                    type: "hidden",
                    name: "id",
                    value: id
                }).appendTo("#searchForm");
                $("#searchForm").attr("action", "/type/findFatherType").submit();
            });



            //按钮的超链接设置函数
            //      myoptions.pageUrl = function(type, page, current) {
            //          return "${pageContext.request.contextPath }/findAll.do?pageNo="
            //                  + page;
            //      };
            //分页回调函数,点击按钮事件
            myoptions.onPageClicked = function (event, originalEvent, type, page) {
                //ajax回调接收数据成功时再重新初始化分页按钮
                console.log("pageNo=", page);
            };

            //分页,在bootstrap-mypaginator.js中
            myPaginatorFun("myPages", 1, 5);

        });

    </script>


</head>

<body>

<!-- 课程类别管理 -->
<form id="searchForm" method="post" action="/type/findType">
    <input type="hidden" id="pageNo" name="pageNo" value="1"/>
</form>
<div class="panel panel-default" id="departmentSet">
    <div class="panel-heading">
        <h3 class="panel-title">课程类别管理</h3>
    </div>
    <div class="panel-body">
        <input type="button" value="添加课程类别" class="btn btn-primary" id="doAddCourseType"/>
        <!-- courseType父类别id,没有时,移除此按钮 -->
        <input type="hidden" name="parent_id" value=""/>
        <span th:each="type:${typePage.list}" th:if="${type.parentId != null}">
            <input type="button" value="返回上级列表" class="btn btn-success" id="back"  th:data-id="${type.parentId}" style="float: right;"/>
        </span>
        <br>
        <br>
        <div class="modal fade" tabindex="-1" id="courseTypeModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">添加类别</h4>
                    </div>
                    <div class="modal-body text-center">
                        <input th:each="type:${typePage.list}" type="hidden" class="form-control" id="courseType-id" th:data-id="${type.parentId}" placeholder="请输入类别名称"/>
                        <div class="row text-right">
                            <label for="courseType-name" class="col-sm-4 control-label">类别名称：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="courseType-name" placeholder="请输入类别名称"/>
                            </div>
                        </div>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" id="addType" th:data_id ="${t}">确定</button>
                        <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- 修改类别模态框 -->
        <div class="modal fade" tabindex="-1" id="courseTypeModal2">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">修改类别</h4>
                    </div>
                    <div class="modal-body text-center">
                        <div class="row text-right">
                            <label for="courseType2-id" class="col-sm-4 control-label">编号：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="courseType2-id" readonly="true"/>
                            </div>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="courseType2-name" class="col-sm-4 control-label">类别名称：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="courseType2-name"/>
                            </div>
                        </div>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" id="modifyType">确定</button>
                        <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="show-list">
            <table class="table table-bordered table-hover" style='text-align: center;'>
                <thead>
                <tr class="text-danger">
                    <th class="text-center">编号</th>
                    <th class="text-center">名称</th>
                    <th class="text-center">状态</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                <tr th:each="type:${typePage.list}">
                    <td>[[${type.id}]]</td>
                    <td>[[${type.typeName}]]</td>
                    <td>
                        <span th:if="${type.status == 1}">启用</span>
                        <span th:if="${type.status == 0}">禁用</span>
                    </td>
                    <td>
                        <input type="button" class="btn btn-warning btn-sm courseType-modify" value="修改"/>
                        <span th:if="${type.status == 1}">
                            <input type="button" class="btn btn-danger btn-sm" name="disabledType"
                                   th:data-id="${type.id}" th:data-status="${type.status}" value="禁用"/>
                        </span>
                        <span th:if="${type.status == 0}">
                            <input type="button" class="btn btn-danger btn-sm" name="enabledType"
                                   th:data-id="${type.id}" th:data-status="${type.status}" value="启用"/>
                        </span>
                        <input type="button" class="btn btn-success btn-sm " id="selectSonOne" th:data-id="${type.id}" th:data-status="${type.status}" value="查询子类别"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div style="text-align: center;">
            <ul id="courseType-page"></ul>
        </div>
    </div>
</div>
</body>

</html>